<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Silentdoer Home</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="icon" href="favicon.ico" type="image/x-icon"/>

	<!-- 由https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800替换而来 -->
	<link rel="stylesheet" href="css/fonts.css">
	<link rel="stylesheet" href="plugins/bootstrap-4.3.1-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
	<link rel="stylesheet" href="plugins/icon-kit/dist/css/iconkit.min.css">
	<link rel="stylesheet" href="plugins/ionicons/dist/css/ionicons.min.css">
	<link rel="stylesheet" href="plugins/perfect-scrollbar/css/perfect-scrollbar.css">
	<link rel="stylesheet" href="plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
	<!--<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">-->
	<link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css">
	<link rel="stylesheet" href="plugins/weather-icons/css/weather-icons.min.css">
	<link rel="stylesheet" href="plugins/c3/c3.min.css">
	<link rel="stylesheet" href="plugins/owl.carousel/dist/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="plugins/owl.carousel/dist/assets/owl.theme.default.min.css">
	<link rel="stylesheet" href="css/theme.css">
	<script src="js/modernizr-2.8.3.min.js"></script>
</head>

<body id="page-top">
<!--[if lt IE 8]>
<p class="browserupgrade">请换成<strong>Firefox或Chrome等主流浏览器</strong>访问。。</p>
<![endif]-->

<div class="wrapper">
	<!--<div id="page-header"></div>-->
	<script src="header.js"></script>

	<!-- 下方内容区（包括左侧导航栏）和右侧内容区和右侧下面的页脚 -->
	<div class="page-wrap">
		<!-- 左侧导航栏 -->
		<!--<div id="page-sidebar"></div>-->
		<script src="sidebar.js"></script>

		<!-- 下方右侧内容部分 -->
		<div class="main-content">
			<!-- 可以在<div class="container-fluid">里面替换为自己的内容数据 -->
			<div class="container-fluid">

				<!-- 内容最上方的一行数据展示，从Bookmarks到Comments -->
				<div class="row clearfix">
					<div class="col-lg-3 col-md-6 col-sm-12">
						<div class="widget">
							<div class="widget-body">
								<div class="d-flex justify-content-between align-items-center">
									<div class="state">
										<h6>Bookmarks</h6>
										<h2>1,410</h2>
									</div>
									<div class="icon">
										<i class="ik ik-award"></i>
									</div>
								</div>
								<small class="text-small mt-10 d-block">6% higher than last month</small>
							</div>
							<div class="progress progress-sm">
								<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="62"
									 aria-valuemin="0" aria-valuemax="100" style="width: 62%;"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-6 col-sm-12">
						<div class="widget">
							<div class="widget-body">
								<div class="d-flex justify-content-between align-items-center">
									<div class="state">
										<h6>Likes</h6>
										<h2>41,410</h2>
									</div>
									<div class="icon">
										<i class="ik ik-thumbs-up"></i>
									</div>
								</div>
								<small class="text-small mt-10 d-block">61% higher than last month</small>
							</div>
							<div class="progress progress-sm">
								<div class="progress-bar bg-success" role="progressbar" aria-valuenow="78"
									 aria-valuemin="0" aria-valuemax="100" style="width: 78%;"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-6 col-sm-12">
						<div class="widget">
							<div class="widget-body">
								<div class="d-flex justify-content-between align-items-center">
									<div class="state">
										<h6>Events</h6>
										<h2>410</h2>
									</div>
									<div class="icon">
										<i class="ik ik-calendar"></i>
									</div>
								</div>
								<small class="text-small mt-10 d-block">Total Events</small>
							</div>
							<div class="progress progress-sm">
								<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="31"
									 aria-valuemin="0" aria-valuemax="100" style="width: 31%;"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-6 col-sm-12">
						<div class="widget">
							<div class="widget-body">
								<div class="d-flex justify-content-between align-items-center">
									<div class="state">
										<h6>Comments</h6>
										<h2>41,410</h2>
									</div>
									<div class="icon">
										<i class="ik ik-message-square"></i>
									</div>
								</div>
								<small class="text-small mt-10 d-block">Total Comments</small>
							</div>
							<div class="progress progress-sm">
								<div class="progress-bar bg-info" role="progressbar" aria-valuenow="20"
									 aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
							</div>
						</div>
					</div>
				</div>

				<!-- 第二行内容 -->
				<div class="row">
					<div class="col-md-8">
						<div class="card">
							<div class="card-body">
								<div class="row align-items-center">
									<div class="col-lg-8 col-md-12">
										<h3 class="card-title">Visitors By Countries</h3>
										<div id="visitfromworld" style="width:100%; height:350px"></div>
									</div>
									<div class="col-lg-4 col-md-12">
										<div class="row mb-15">
											<div class="col-9">India</div>
											<div class="col-3 text-right">28%</div>
											<div class="col-12">
												<div class="progress progress-sm mt-5">
													<div class="progress-bar bg-green" role="progressbar"
														 style="width: 48%" aria-valuenow="48" aria-valuemin="0"
														 aria-valuemax="100"></div>
												</div>
											</div>
										</div>
										<div class="row mb-15">
											<div class="col-9"> UK</div>
											<div class="col-3 text-right">21%</div>
											<div class="col-12">
												<div class="progress progress-sm mt-5">
													<div class="progress-bar bg-aqua" role="progressbar"
														 style="width: 33%" aria-valuenow="33" aria-valuemin="0"
														 aria-valuemax="100"></div>
												</div>
											</div>
										</div>
										<div class="row mb-15">
											<div class="col-9"> USA</div>
											<div class="col-3 text-right">18%</div>
											<div class="col-12">
												<div class="progress progress-sm mt-5">
													<div class="progress-bar bg-purple" role="progressbar"
														 style="width: 40%" aria-valuenow="40" aria-valuemin="0"
														 aria-valuemax="100"></div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-9">China</div>
											<div class="col-3 text-right">12%</div>
											<div class="col-12">
												<div class="progress progress-sm mt-5">
													<div class="progress-bar bg-danger" role="progressbar"
														 style="width: 15%" aria-valuenow="15" aria-valuemin="0"
														 aria-valuemax="100"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="card" style="min-height: 422px;">
							<div class="card-header"><h3>Donut chart</h3></div>
							<div class="card-body">
								<div id="c3-donut-chart"></div>
							</div>
						</div>
					</div>
				</div>

				<!-- 第三行内容 -->
				<div class="row">
					<div class="col-md-4">
						<div class="card">
							<div class="card-header">
								<h3>Recent Chat</h3>
								<div class="card-header-right">
									<ul class="list-unstyled card-option">
										<li><i class="ik ik-chevron-left action-toggle"></i></li>
										<li><i class="ik ik-minus minimize-card"></i></li>
										<li><i class="ik ik-x close-card"></i></li>
									</ul>
								</div>
							</div>
							<div class="card-body chat-box scrollable" style="height:300px;">
								<ul class="chat-list">
									<li class="chat-item">
										<div class="chat-img"><img src="img/users/1.jpg" alt="user"></div>
										<div class="chat-content">
											<h6 class="font-medium">James Anderson</h6>
											<div class="box bg-light-info">Lorem Ipsum is simply dummy text of the
												printing &amp; type setting industry.
											</div>
										</div>
										<div class="chat-time">10:56 am</div>
									</li>
									<li class="chat-item">
										<div class="chat-img"><img src="img/users/2.jpg" alt="user"></div>
										<div class="chat-content">
											<h6 class="font-medium">Bianca Doe</h6>
											<div class="box bg-light-info">It’s Great opportunity to work.</div>
										</div>
										<div class="chat-time">10:57 am</div>
									</li>
									<li class="odd chat-item">
										<div class="chat-content">
											<div class="box bg-light-inverse">I would love to join the team.</div>
											<br>
										</div>
									</li>
									<li class="odd chat-item">
										<div class="chat-content">
											<div class="box bg-light-inverse">Whats budget of the new project.</div>
											<br>
										</div>
										<div class="chat-time">10:59 am</div>
									</li>
									<li class="chat-item">
										<div class="chat-img"><img src="img/users/3.jpg" alt="user"></div>
										<div class="chat-content">
											<h6 class="font-medium">Angelina Rhodes</h6>
											<div class="box bg-light-info">Well we have good budget for the project
											</div>
										</div>
										<div class="chat-time">11:00 am</div>
									</li>
								</ul>
							</div>
							<div class="card-footer chat-footer">
								<div class="input-wrap">
									<input type="text" placeholder="Type and enter" class="form-control">
								</div>
								<button type="button" class="btn btn-icon btn-theme"><i class="fa fa-paper-plane"></i>
								</button>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="card">
							<div class="card-body">
								<div class="d-flex">
									<h4 class="card-title">Weather Report</h4>
									<select class="form-control w-25 ml-auto">
										<option selected="">Today</option>
										<option value="1">Weekly</option>
									</select>
								</div>
								<div class="d-flex align-items-center flex-row mt-30">
									<div class="p-2 f-50 text-info"><i class="wi wi-day-showers"></i>
										<span>23<sup>°</sup></span></div>
									<div class="p-2">
										<h3 class="mb-0">Saturday</h3>
										<small>Banglore, India</small>
									</div>
								</div>
								<table class="table table-borderless">
									<tbody>
									<tr>
										<td>Wind</td>
										<td class="font-medium">ESE 17 mph</td>
									</tr>
									<tr>
										<td>Humidity</td>
										<td class="font-medium">83%</td>
									</tr>
									<tr>
										<td>Pressure</td>
										<td class="font-medium">28.56 in</td>
									</tr>
									</tbody>
								</table>
								<hr>
								<ul class="list-unstyled row text-center city-weather-days mb-0 mt-20">
									<li class="col"><i class="wi wi-day-sunny mr-5"></i><span>09:30</span>
										<h3>20<sup>°</sup></h3></li>
									<li class="col"><i class="wi wi-day-cloudy mr-5"></i><span>11:30</span>
										<h3>22<sup>°</sup></h3></li>
									<li class="col"><i class="wi wi-day-hail mr-5"></i><span>13:30</span>
										<h3>25<sup>°</sup></h3></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="card" style="min-height: 422px;">
							<div class="card-header">
								<h3>Timeline</h3>
								<div class="card-header-right">
									<ul class="list-unstyled card-option">
										<li><i class="ik ik-chevron-left action-toggle"></i></li>
										<li><i class="ik ik-minus minimize-card"></i></li>
										<li><i class="ik ik-x close-card"></i></li>
									</ul>
								</div>
							</div>
							<div class="card-body timeline">
								<div class="header bg-theme"
									 style="background-image: url('img/placeholder/placeimg_400_200_nature.jpg')">
									<div class="color-overlay d-flex align-items-center">
										<div class="day-number">8</div>
										<div class="date-right">
											<div class="day-name">Monday</div>
											<div class="month">February 2018</div>
										</div>
									</div>
								</div>
								<ul>
									<li>
										<div class="bullet bg-pink"></div>
										<div class="time">11am</div>
										<div class="desc">
											<h3>Attendance</h3>
											<h4>Computer Class</h4>
										</div>
									</li>
									<li>
										<div class="bullet bg-green"></div>
										<div class="time">12pm</div>
										<div class="desc">
											<h3>Design Team</h3>
											<h4>Hangouts</h4>
										</div>
									</li>
									<li>
										<div class="bullet bg-orange"></div>
										<div class="time">2pm</div>
										<div class="desc">
											<h3>Finish</h3>
											<h4>Go to Home</h4>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<!-- 第四行内容 -->
				<div class="card">
					<div class="card-header row">
						<div class="col col-sm-3">
							<div class="dropdown d-inline-block">
								<a class="btn-icon checkbox-dropdown dropdown-toggle" href="#" id="moreDropdown0"
								   role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
								<div class="dropdown-menu" aria-labelledby="moreDropdown0">
									<a class="dropdown-item" id="checkbox_select_all" href="javascript:void(0);">Select
										All</a>
									<a class="dropdown-item" id="checkbox_deselect_all" href="javascript:void(0);">Deselect
										All</a>
								</div>
							</div>
							<div class="card-options d-inline-block">
								<a href="#"><i class="ik ik-inbox"></i></a>
								<a href="#"><i class="ik ik-plus"></i></a>
								<a href="#"><i class="ik ik-rotate-cw"></i></a>
								<div class="dropdown d-inline-block">
									<a class="nav-link dropdown-toggle" href="#" id="moreDropdown1" role="button"
									   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
											class="ik ik-more-horizontal"></i></a>
									<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown1">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">More Action</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-sm-6">
							<div class="card-search with-adv-search dropdown">
								<form action="">
									<input type="text" class="form-control" placeholder="Search.." required>
									<button type="submit" class="btn btn-icon"><i class="ik ik-search"></i></button>
									<button type="button" id="adv_wrap_toggler"
											class="adv-btn ik ik-chevron-down dropdown-toggle" data-toggle="dropdown"
											data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
									<div class="adv-search-wrap dropdown-menu dropdown-menu-right"
										 aria-labelledby="adv_wrap_toggler">
										<div class="form-group">
											<input type="text" class="form-control" placeholder="Full Name">
										</div>
										<div class="form-group">
											<input type="email" class="form-control" placeholder="Email">
										</div>
										<button class="btn btn-theme">Search</button>
									</div>
								</form>
							</div>
						</div>
						<div class="col col-sm-3">
							<div class="card-options text-right">
								<span class="mr-5">1 - 50 of 2,500</span>
								<a href="#"><i class="ik ik-chevron-left"></i></a>
								<a href="#"><i class="ik ik-chevron-right"></i></a>
							</div>
						</div>
					</div>
					<div class="card-body p-0">
						<div class="list-item-wrap">
							<div class="list-item">
								<div class="item-inner">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="item_checkbox"
											   name="item_checkbox" value="option1">
										<span class="custom-control-label">&nbsp;</span>
									</label>
									<div class="list-title"><a href="javascript:void(0)">Lorem Ipsum is simply dumm
										dummy text of the printing and typesetting industry.</a></div>
									<div class="list-actions">
										<a href="#"><i class="ik ik-eye"></i></a>
										<a href="#"><i class="ik ik-inbox"></i></a>
										<a href="#"><i class="ik ik-edit-2"></i></a>
										<a href="#"><i class="ik ik-trash-2"></i></a>
									</div>
								</div>

								<div class="qickview-wrap">
									<div class="desc">
										<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero
											facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula
											at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id.
											Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed
											pulvinar tortor gravida vitae.</p>
									</div>
								</div>
							</div>
							<div class="list-item">
								<div class="item-inner">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="item_checkbox"
											   name="item_checkbox" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
									<div class="list-title"><a href="javascript:void(0)">Aenean eu pharetra arcu, vitae
										elementum sem. Sed non ligula molestie, finibus lacus at, suscipit mi. Nunc
										luctus lacus vel felis blandit, eu finibus augue tincidunt.</a></div>
									<div class="list-actions">
										<a href="#"><i class="ik ik-eye"></i></a>
										<a href="#"><i class="ik ik-inbox"></i></a>
										<a href="#"><i class="ik ik-edit-2"></i></a>
										<a href="#"><i class="ik ik-trash-2"></i></a>
									</div>
								</div>
								<div class="qickview-wrap">
									<div class="desc">
										<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero
											facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula
											at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id.
											Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed
											pulvinar tortor gravida vitae.</p>
									</div>
								</div>
							</div>
							<div class="list-item">
								<div class="item-inner">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="item_checkbox"
											   name="item_checkbox" value="option3">
										<span class="custom-control-label">&nbsp;</span>
									</label>
									<div class="list-title"><a href="javascript:void(0)">Donec lectus augue, suscipit in
										sodales sit amet, semper sit amet enim. Duis pretium, nisi id pretium ornare,
										tortor nibh sodales tellus.</a></div>
									<div class="list-actions">
										<a href="#"><i class="ik ik-eye"></i></a>
										<a href="#"><i class="ik ik-inbox"></i></a>
										<a href="#"><i class="ik ik-edit-2"></i></a>
										<a href="#"><i class="ik ik-trash-2"></i></a>
									</div>
								</div>
								<div class="qickview-wrap">
									<div class="desc">
										<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero
											facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula
											at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id.
											Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed
											pulvinar tortor gravida vitae.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 第五行内容 -->
				<div class="card">
					<div class="card-header row">
						<div class="col col-sm-3">
							<div class="card-options d-inline-block">
								<a href="#"><i class="ik ik-inbox"></i></a>
								<a href="#"><i class="ik ik-plus"></i></a>
								<a href="#"><i class="ik ik-rotate-cw"></i></a>
								<div class="dropdown d-inline-block">
									<a class="nav-link dropdown-toggle" href="#" id="moreDropdown2" role="button"
									   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
											class="ik ik-more-horizontal"></i></a>
									<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown2">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">More Action</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-sm-6">
							<div class="card-search with-adv-search dropdown">
								<form action="">
									<input type="text" class="form-control global_filter" id="global_filter"
										   placeholder="Search.." required>
									<button type="submit" class="btn btn-icon"><i class="ik ik-search"></i></button>
									<button type="button" id="adv_wrap_toggler"
											class="adv-btn ik ik-chevron-down dropdown-toggle" data-toggle="dropdown"
											data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
									<div class="adv-search-wrap dropdown-menu dropdown-menu-right"
										 aria-labelledby="adv_wrap_toggler">
										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<input type="text" class="form-control column_filter"
														   id="col0_filter" placeholder="Name" data-column="0">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<input type="text" class="form-control column_filter"
														   id="col1_filter" placeholder="Position" data-column="1">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<input type="text" class="form-control column_filter"
														   id="col2_filter" placeholder="Office" data-column="2">
												</div>
											</div>
											<div class="col-md-4">
												<div class="form-group">
													<input type="text" class="form-control column_filter"
														   id="col3_filter" placeholder="Age" data-column="3">
												</div>
											</div>
											<div class="col-md-4">
												<div class="form-group">
													<input type="text" class="form-control column_filter"
														   id="col4_filter" placeholder="Start date" data-column="4">
												</div>
											</div>
											<div class="col-md-4">
												<div class="form-group">
													<input type="text" class="form-control column_filter"
														   id="col5_filter" placeholder="Salary" data-column="5">
												</div>
											</div>
										</div>
										<button class="btn btn-theme">Search</button>
									</div>
								</form>
							</div>
						</div>
						<div class="col col-sm-3">
							<div class="card-options text-right">
								<span class="mr-5" id="top">1 - 50 of 2,500</span>
								<a href="#"><i class="ik ik-chevron-left"></i></a>
								<a href="#"><i class="ik ik-chevron-right"></i></a>
							</div>
						</div>
					</div>
					<div class="card-body">
						<table id="advanced_table" class="table">
							<thead>
							<tr>
								<th class="nosort" width="10">
									<label class="custom-control custom-checkbox m-0">
										<input type="checkbox" class="custom-control-input" id="selectall" name=""
											   value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</th>
								<th class="nosort">Avatar</th>
								<th>Name</th>
								<th>Position</th>
								<th>Office</th>
								<th>Age</th>
								<th>Start date</th>
								<th>Salary</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/1.jpg" class="table-user-thumb" alt=""></td>
								<td>Tiger Nixon</td>
								<td>System Architect</td>
								<td>Edinburgh</td>
								<td>61</td>
								<td>2011/04/25</td>
								<td>$320,800</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/2.jpg" class="table-user-thumb" alt=""></td>
								<td>Garrett Winters</td>
								<td>Accountant</td>
								<td>Tokyo</td>
								<td>63</td>
								<td>2011/07/25</td>
								<td>$170,750</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/3.jpg" class="table-user-thumb" alt=""></td>
								<td>Ashton Cox</td>
								<td>Junior Technical Author</td>
								<td>San Francisco</td>
								<td>66</td>
								<td>2009/01/12</td>
								<td>$86,000</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/4.jpg" class="table-user-thumb" alt=""></td>
								<td>Cedric Kelly</td>
								<td>Senior Javascript Developer</td>
								<td>Edinburgh</td>
								<td>22</td>
								<td>2012/03/29</td>
								<td>$433,060</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/5.jpg" class="table-user-thumb" alt=""></td>
								<td>Airi Satou</td>
								<td>Accountant</td>
								<td>Tokyo</td>
								<td>33</td>
								<td>2008/11/28</td>
								<td>$162,700</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/1.jpg" class="table-user-thumb" alt=""></td>
								<td>Brielle Williamson</td>
								<td>Integration Specialist</td>
								<td>New York</td>
								<td>61</td>
								<td>2012/12/02</td>
								<td>$372,000</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/2.jpg" class="table-user-thumb" alt=""></td>
								<td>Herrod Chandler</td>
								<td>Sales Assistant</td>
								<td>San Francisco</td>
								<td>59</td>
								<td>2012/08/06</td>
								<td>$137,500</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/3.jpg" class="table-user-thumb" alt=""></td>
								<td>Rhona Davidson</td>
								<td>Integration Specialist</td>
								<td>Tokyo</td>
								<td>55</td>
								<td>2010/10/14</td>
								<td>$327,900</td>
							</tr>
							<tr>
								<td>
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input select_all_child" id=""
											   name="" value="option2">
										<span class="custom-control-label">&nbsp;</span>
									</label>
								</td>
								<td><img src="img/users/4.jpg" class="table-user-thumb" alt=""></td>
								<td>Colleen Hurst</td>
								<td>Javascript Developer</td>
								<td>San Francisco</td>
								<td>39</td>
								<td>2009/09/15</td>
								<td>$205,500</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>

				<div class="card">
					<button class="btn btn-primary" type="button" disabled>
						<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
						<span class="sr-only">Loading...</span>
					</button>
				</div>
			</div>
		</div>

		<!--<div id="page-footer"></div>-->
		<script src="footer.js"></script>

		<!-- 这两个聊天框定义的位置不能乱放，放其他地方可能会没法弹出框 -->
		<!-- 点击消息item后右侧弹出的聊天框 -->
		<aside class="right-sidebar">
			<div class="sidebar-chat" data-plugin="chat-sidebar">
				<div class="sidebar-chat-info">
					<h6>Chat List</h6>
					<form class="mr-t-10">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search for friends ...">
							<i class="ik ik-search"></i>
						</div>
					</form>
				</div>
				<div class="chat-list">
					<div class="list-group row">
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Gene Newman">
							<figure class="user--online">
								<img src="img/users/1.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Gene Newman</span>  <span
									class="username">@gene_newman</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Billy Black">
							<figure class="user--online">
								<img src="img/users/2.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Billy Black</span>  <span
									class="username">@billyblack</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Herbert Diaz">
							<figure class="user--online">
								<img src="img/users/3.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Herbert Diaz</span>  <span class="username">@herbert</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Sylvia Harvey">
							<figure class="user--online">
								<img src="img/users/4.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Sylvia Harvey</span>  <span class="username">@sylvia</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item active" data-chat-user="Marsha Hoffman">
							<figure class="user--busy">
								<img src="img/users/5.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Marsha Hoffman</span>  <span
									class="username">@m_hoffman</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Mason Grant">
							<figure class="user--offline">
								<img src="img/users/1.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Mason Grant</span>  <span
									class="username">@masongrant</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Shelly Sullivan">
							<figure class="user--offline">
								<img src="img/users/2.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Shelly Sullivan</span>  <span
									class="username">@shelly</span></span>
						</a>
					</div>
				</div>
			</div>
		</aside>

		<!-- 点击好友头像后弹出的聊天框 -->
		<div class="chat-panel" hidden>
			<div class="card">
				<div class="card-header d-flex justify-content-between">
					<a href="javascript:void(0);"><i class="ik ik-message-square text-success"></i></a>
					<span class="user-name">John Doe</span>
					<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
				</div>
				<div class="card-body">
					<div class="widget-chat-activity flex-1">
						<div class="messages">
							<div class="message media reply">
								<figure class="user--online">
									<a href="#">
										<img src="img/users/3.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Epic Cheeseburgers come in all kind of styles.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Cheeseburgers make your knees weak.</p>
								</div>
							</div>
							<div class="message media reply">
								<figure class="user--offline">
									<a href="#">
										<img src="img/users/5.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Cheeseburgers will never let you down.</p>
									<p>They'll also never run around or desert you.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>A great cheeseburger is a gastronomical event.</p>
								</div>
							</div>
							<div class="message media reply">
								<figure class="user--busy">
									<a href="#">
										<img src="img/users/5.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>There's a cheesy incarnation waiting for you no matter what you palete
										preferences are.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>If you are a vegan, we are sorry for you loss.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<form action="javascript:void(0)" class="card-footer" method="post">
					<div class="d-flex justify-content-end">
						<textarea class="border-0 flex-1" rows="1" placeholder="Type your message here"></textarea>
						<button class="btn btn-icon" type="submit"><i class="ik ik-arrow-right text-success"></i>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<!-- 点击头像左侧的栏出现的框 -->
<div class="modal fade apps-modal" id="appsModal" tabindex="-1" role="dialog" aria-labelledby="appsModalLabel"
	 aria-hidden="true" data-backdrop="false">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ik ik-x-circle"></i></button>
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="quick-search">
				<div class="container">
					<div class="row">
						<div class="col-md-4 ml-auto mr-auto">
							<div class="input-wrap">
								<input type="text" id="quick-search" class="form-control" placeholder="Search..."/>
								<i class="ik ik-search"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-body d-flex align-items-center">
				<div class="container">
					<div class="apps-wrap">
						<div class="app-item">
							<a href="#"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
						</div>
						<div class="app-item dropdown">
							<a href="#" class="dropdown-toggle" role="button" id="dropdownMenuLink"
							   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
									class="ik ik-command"></i><span>Ui</span></a>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-mail"></i><span>Message</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-users"></i><span>Accounts</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-shopping-cart"></i><span>Sales</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-briefcase"></i><span>Purchase</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-server"></i><span>Menus</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-clipboard"></i><span>Pages</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-message-square"></i><span>Chats</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-map-pin"></i><span>Contacts</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-box"></i><span>Blocks</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-calendar"></i><span>Events</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-bell"></i><span>Notifications</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-pie-chart"></i><span>Reports</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-layers"></i><span>Tasks</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-edit"></i><span>Blogs</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-settings"></i><span>Settings</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-more-horizontal"></i><span>More</span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-3.4.1.js"><\/script>')</script>
<script src="plugins/popper.js/dist/umd/popper.min.js"></script>
<script src="plugins/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
<script src="plugins/screenfull/dist/screenfull.js"></script>
<script src="plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
<!--<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-cn-mill-en.js"></script>-->
<script src="plugins/moment/moment.js"></script>
<script src="plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="plugins/d3/dist/d3.min.js"></script>
<script src="plugins/c3/c3.min.js"></script>
<script src="js/tables.js"></script>
<script src="js/widgets.js"></script>
<script src="js/charts.js"></script>
<script src="js/vue.js"></script>
<script src="js/theme.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
	(function (b, o, i, l, e, r) {
		b.GoogleAnalyticsObject = l;
		b[l] || (b[l] =
			function () {
				(b[l].q = b[l].q || []).push(arguments)
			});
		b[l].l = +new Date;
		e = o.createElement(i);
		r = o.getElementsByTagName(i)[0];
		e.src = 'https://www.google-analytics.com/analytics.js';
		r.parentNode.insertBefore(e, r)
	}(window, document, 'script', 'ga'));
	ga('create', 'UA-XXXXX-X', 'auto');
	ga('send', 'pageview');
</script>-->

<!--<script>
	// 如果这种方式有问题（在于会多一层）可以用js原生的document.write来将其他页面的内容写的此页面特定位置
	// 或者将header.html去掉第一层放到此页面里（不过class之类的也需要在此页面定义，不过还过得去只是需要定义一些属性）
	//$("#page-header").load("header.html");
	//$("#page-sidebar").load("sidebar.html");
	//$("#page-footer").load("footer.html");
</script>-->

<script>
	// FLAG vue for header.html
	// 对于由jquery加载进的dom如header.html不能用vue不知道为什么，反正用了各种问题，所以这部分就用jquery来实现好了
	// vue的:src="mmm_src"里mmm其实是一组共同特点的标志符，比如都是用户的头像，用id可能会重复，因此可以用type="mmm_src"来类比
	// jquery找出type是mmm_src的元素，将他们的src改成对应值即可

	// 找到了解决方案，就是将原来是jquery加载的改成js加载，原本是header.html的改成header.js
	/*$(document).ready(function(){

	});*/

	new Vue({
		el: '#app-header'
		, data() {
			let protocol = 'http';
			let urlPrefix = protocol + '://' + window.location.host;
			let userAvatar = urlPrefix + '/img/user.jpg';
			let usersAvatar1 = urlPrefix + '/img/users/1.jpg';
			return {
				userAvatar,
				usersAvatar1
			};
		}
	});
</script>

<script>
	// FLAG vue for sidebar.html
	class UriUtils {
		// 判断是否是相对地址，这里以/开头即是相对地址
		static isRelativeUri(uri) {
			if (uri !== undefined && uri !== null && uri !== '') {
				if (uri.startsWith("/")) {
					return true;
				} else {
					return false;
				}
			}
			throw new Error('arg is not valid uri');
		}

		static isBlankUri(uri) {
			if (uri === undefined || uri === null || uri === '') {
				return true;
			}
			return false;
		}

		// 获取http://localhost:8080/index.html?xxx的/index.html
		static getUrlRelativePath() {
			const url = document.location.toString();
			const arrUrl = url.split("//");

			let start = arrUrl[1].indexOf("/");
			//stop省略，截取从start开始到结尾的所有字符
			let relUrl = arrUrl[1].substring(start);

			if(relUrl.indexOf("?") !== -1){
				relUrl = relUrl.split("?")[0];
			}
			return relUrl;
		}
	}

	class SidebarHeader {
		// 构造方法，只要触发new实例化操作即执行，由于js里方法参数没有类型，且可以不传所有参数，因为没法重载
		constructor(linkUrl, logoUrl, brandName) {
			if (typeof linkUrl === 'string') {
				this.linkUrl = linkUrl;
				this.logoUrl = logoUrl;
				this.brandName = brandName;
			} else {
				this.constructorJSON(linkUrl);
			}
		}

		// TODO 查来查去，js里用JSON.parse(str)时是指定其类型的（原型），Object里有个方法可以但是据说效率很低下
		// 所以还是这种重新new一个对象，然后将转换的JSON对象映射到这个对象上的比较靠谱。。
		// 而且即便用了Object.setPrototypeOf(data, SidebarHeader.prototype);IDE也不能识别类型。。
		constructorJSON(json) {
			this.linkUrl = json.linkUrl;
			this.logoUrl = json.logoUrl;
			this.brandName = json.brandName;
		}

		// js里有typeof和instanceof【虽然是弱类型，虽然没法显示指定类型，但是对象里有个隐藏的属性指定其类型
		// ，貌似就是prototype？，一个对象在定义后没有初始化，那么typeof obj是undefined；
		// 每次对引用进行赋值操作都可能改变其prototype，比如let a = 3,此时它的类型是number,然后a = '3'，此时其类型是string
		// js里参数不需要类型，且还不能声明类型（有点坑爹，加个类型可以有利于IDE快速提示【显示类字段方法等】）
		// ，函数也不能加返回类型，声明对象也不能加类型，fuck
		// 参数也可以不传值，这个时候对于位置的参数的值貌似是undefined还是null来着。
		// ES7也可以在构造方法外面定义实例属性，和定义实例方法的方式是一样的，即（最好加个默认值，不然怪怪的）
		// 这里觉得怪主要是js里不需要类型，然后也没有private的说法，所以本来是int aaa;或private int aaa;的直接变成aaa就很怪了
		//linkUrl;
		// ES7里定义静态方法和变量其实就是前面加个static关键字即可；
	}

	// 可以约定，以_开头的方法或属性都是私有的（当然外部仍然可以调用，只是给开发者自己看）
	class SidebarItem {
		// 构造方法，只要触发new实例化操作即执行
		constructor(linkUrl, itemName, iconType, badge, badgeType, active, hasSub, subItems) {
			if (typeof linkUrl === 'string') {
				this.linkUrl = linkUrl;
				this.itemName = itemName;
				this.iconType = iconType;
				this.badge = badge;
				this.badgeType = json.badgeType;
				this.active = active;
				this.hasSub = hasSub;
				this.subItems = subItems;
			} else {
				this.constructorJSON(linkUrl);
			}

			// 通用属性定义（已作废）
			this.additionalClass = '';

			// 还可以这样定义实例方法
			this.hasSubItems = () => {
				if (this.hasSub === true && this.subItems !== undefined && this.subItems.length > 0) {
					return true;
				}
				return false;
			}
		}

		constructorJSON(json) {
			this.linkUrl = json.linkUrl;
			this.itemName = json.itemName;
			this.iconType = json.iconType;
			this.badge = json.badge;
			this.badgeType = json.badgeType;
			this.active = json.active;
			this.hasSub = json.hasSub;
			this.subItems = json.subItems;
		}

		// 注意在class类中，方法之间不需要添加逗号
		isActive() {
			return this.active === true;
		}
	}

	new Vue({
		el: '#app-sidebar'
		, data() {
			let protocol = 'http';
			let urlPrefix = protocol + '://' + window.location.host;

			return {
				urlPrefix,
				/*也可以设置默认值*/
				sidebarHeader: null,
				sidebarItemsNavigation: null
			};
		}
		, methods: {
			async fetchSidebarHeader() {
				try {
					// TODO 可以将sidebarHeader数据缓存到浏览器的localStorage里（因为这种数据不是经常变的）
					// TODO 然后调用接口前先判断缓存里是否有，有则用缓存的（还可以更先进，用缓存的同时异步请求接口获取
					// TODO 数据，然后和缓存比较，如果发现不一致则替换缓存（或直接替换），这样下次切换页面时数据会最新）
					// localStorage.setItem('sidebarHeader', JSON.stringify(result));
					// fetch是浏览器自带的，默认是GET
					this.sidebarHeader = await fetch(`${this.urlPrefix}/demovuebootstrap/api/application/index/sidebarHeader`)
						.then(res => res.json())
						.then(data => {
							let result = new SidebarHeader(data);
							if (UriUtils.isRelativeUri(result.linkUrl)) {
								result.linkUrl = this.urlPrefix + result.linkUrl;
							}
							if (UriUtils.isRelativeUri(result.logoUrl)) {
								result.logoUrl = this.urlPrefix + result.logoUrl;
							}
							return result;
						});
				} catch (err) {
					console.log('Load SidebarHeader failed! ' + err);
				}
			}
			, async fetchSidebarItems() {
				try {
					// fetch是浏览器自带的，默认是GET
					this.sidebarItemsNavigation = await fetch(`${this.urlPrefix}/demovuebootstrap/api/application/index/sidebarItems`)
						.then(res => res.json())
						.then(data => {
							let result = [];
							data.forEach(i => {
								let item = new SidebarItem(i);
								if (UriUtils.isBlankUri(item.linkUrl)) {
									item.linkUrl = 'javascript:void(0)';
								} else {
									if (UriUtils.isRelativeUri(item.linkUrl)) {
										item.linkUrl = this.urlPrefix + item.linkUrl;
									}
								}

								/*if (item.linkUrl.search(UriUtils.getUrlRelativePath()) !== -1) {
									item.additionalClass += ' active';
								}
								if (item.hasSubItems()) {
									item.additionalClass += ' has-sub';
								}*/
								if (item.linkUrl.search(UriUtils.getUrlRelativePath()) !== -1) {
									item.active = true;
								}
								// 将服务端的icon type转换为class
								switch (item.iconType) {
									case 'chart':
										item.iconType = ' ik-bar-chart-2';
										break;
									case 'menu':
										item.iconType = ' ik-menu';
										break;
									case 'layers':
										item.iconType = ' ik-layers';
										break;
									default:
										item.iconType = null;
								}
								// 将服务端传来的badge type转换为class
								switch (item.badgeType) {
									case 'success':
										item.badgeType = ' badge-success';
										break;
									case 'danger':
										item.badgeType = ' badge-danger';
										break;
									default:
										item.badgeType = null;
								}
								if (item.hasSubItems()) {
									for (let i = 0; i < item.subItems.length; i++) {
										let subItem = new SidebarItem(item.subItems[i]);
										if (UriUtils.isRelativeUri(subItem.linkUrl)) {
											subItem.linkUrl = this.urlPrefix + subItem.linkUrl;
										}
										// 其实可以移到上面的if里面最后
										item.subItems[i] = subItem;
									}
								}
								result.push(item);
							});
							return result;
						});
				} catch (err) {
					console.log('Load SidebarItems failed! ' + err);
				}
			}
		}
		/*这里面的方法貌似仍然比对v-bind之类的渲染要慢，貌似vue没法在渲染之前获取数据，而是通过v-if来判断没有数据先不展示*/
		, created() {
			this.fetchSidebarHeader();
			this.fetchSidebarItems();
		}
	});
</script>
</body>
</html>
